<template>
    <div class="curborder1">
        <div class="curbordertop">
            <span class="lt"><img src="/images/qjbg1.png" alt=""></span>
            <span class="bd"></span>
            <span class="rt"><img src="/images/qjbg2.png" alt=""/></span>
        </div>
        <div class="curbordermain"><slot/></div>
        <div class="curbordertop curborderbottom">
            <span class="lt"><img src="/images/qjbg3.png" alt=""/></span>
            <span class="bd"></span>
            <span class="rt"><img src="/images/qjbg4.png" alt=""/></span>
        </div>
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'

export default {
    components:{
       
    },
    props:{

    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            
        })

        return{
            ...toRefs(state)
        }
    }
}
</script>

<style lang="scss" scoped>
    .curborder1{
        .curbordertop{
            display: flex;
            height: 40px;
            .lt,.rt{
                height: 100%;
                width: 40px;
                img{
                    display: block;
                    width: 100%;
                }
            }
            .bd{
                flex: 1;
                border-top: 4px solid #7AEFF9;
                background: #00327A;
            }
            &.curborderbottom{
               
                .bd{
                    border-top:0;
                    border-bottom: 4px solid #7AEFF9;
                }
            }
        }
        .curbordermain{
            background: #00327A;
            border-left: 4px solid #7AEFF9;
            border-right: 4px solid #7AEFF9;
        }
    }
</style>